<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<div class="panel panel-default" >
    <div class="panel-heading" >
        Zoek een klant
    </div>
    <div class="container-fluid">
        <form:form class="form-horizontal" id="loginForm" action="javascript:getCustomers();" method="post" modelAttribute="customer">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label">Zoek op achternaam</label>
                    <div class="col-md-3">
                        <input class="form-control" type="text" path='achternaam' id="achternaam" placeholder="Achternaam"/>                          
                    </div>
                    <div class="col-md-3">
                        <input class="btn" id="submit" name="submit" type="submit" value="Zoek"/>
                    </div>
                </div>
            </div>
        </form:form>
        <div class="row" id="searchResult" >
        </div>
    </div>
</div>

<script>
    function getCustomers(){
//        debugger;
        // Get the div in which the searchresult need to go.
        var selSearchDiv = document.getElementById('searchResult');
        var getAchternaam = document.getElementById('achternaam').value;
        $.ajax({
            url: window.location.origin + "/reisorg-empl-site/customer/find",
            type: "POST",
            contentType: 'application/jsons',
            dataType: 'json',
            data: getAchternaam,            
            success: function (data, textStatus, jqXHR)
            {
//                debugger;
                var line = "<div class=\"row\"><div class=\"col-md-1\">id</div><div class=\"col-md-1\">Naam</div><div class=\"col-md-1\">Achternaam</div><div class=\"col-md-1\">Straat</div><div class=\"col-md-1\">Huisnummer</div><div class=\"col-md-1\">Woonplaats</div></div>";
                for (var i = 0; i < data.length; i++) {
                    line += "<div class=\"row\"><div class=\"col-md-1\"><a href=\"/reisorg-empl-site/customer/details/" + data[i].id + "\">" + data[i].id + "</a></div><div class=\"col-md-1\">" + data[i].surname + "</div><div class=\"col-md-1\">" + data[i].lastname + "</div><div class=\"col-md-1\">" + data[i].streetAddress + "</div><div class=\"col-md-1\">" + data[i].houseNumber + "</div><div class=\"col-md-1\">" + data[i].city + "</div></div>";
                }
                
                selSearchDiv.innerHTML = line;
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
//                    debugger
                alert("Mislukt om een connectie met de server te maken");
            }
        });
    }
</script>